<template>
  <div class="rescue-system">
    <!-- 系统标题 -->
    <header class="system-header">
      <h1>正昱碳化硅管理平台</h1>
    </header>

    <!-- Tab 切换 -->
    <div class="tab-bar">
      <div
        v-for="tab in tabs"
        :key="tab.key"
        class="tab-btn"
        :class="{ active: activeTab === tab.key }"
        @click="activeTab = tab.key"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 主体内容：默认展示总览 -->
    <div class="tab-content">
      <SICOverview v-if="activeTab === 'overview'" />
      <ProductionPage v-else-if="activeTab === 'production'" />
      <OperationMonitor v-else-if="activeTab === 'monitor'" />
      <div v-else class="placeholder">
        <div class="placeholder-text">页面开发中...</div>
      </div>
    </div>

    <!-- 预留底部区域以适配现有布局 -->
    <div class="bottom-panel"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import SICOverview from './components/SICOverview.vue'
import ProductionPage from './components/ProductionPage.vue'
import OperationMonitor from './components/OperationMonitor.vue'

export default {
  name: 'App',
  components: { SICOverview, ProductionPage, OperationMonitor },
  setup() {
    const activeTab = ref('overview')
    const tabs = ref([
      { key: 'overview', label: '总览' },
      { key: 'production', label: '冶炼炉生产' },
      { key: 'monitor', label: '运行监控' }
    ])

    // 响应式字体大小设置（沿用原项目）
    const setResponsiveFont = () => {
      const html = document.documentElement
      const width = html.clientWidth
      let fontSize = 24
      if (width < 1024) fontSize = 18
      else if (width > 1920) fontSize = 24
      else fontSize = (width / 80) + 'px'
      html.style.fontSize = fontSize
    }

    onMounted(() => {
      setResponsiveFont()
      window.addEventListener('resize', setResponsiveFont)
    })

    return { activeTab, tabs }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  gap: .4rem;
  padding: .2rem 0;
  justify-content: center;
}
.tab-btn {
  padding: .16rem .6rem;
  border: 1px solid #006cff;
  background: rgba(0,108,255,.1);
  color: #4c9bfd;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  font-size: .6rem;
}
.tab-btn.active { background: #006cff; color: #fff; }
.tab-content { padding: .2rem .4rem; height: auto; min-height: 0; overflow-y: auto;
    overflow-x: hidden; }
.placeholder { height: 100%; display:flex; align-items:center; justify-content:center; }
.placeholder-text { color:#4c9bfd; font-size:.9rem; }
.bottom-panel { display: none; }
</style>
